yRadio

Description

The yRadio is a clickable element with different optical styles, used to indicate its different states. The yRadio can be used to toggle a state or mirror a user selection where only one selection is possable. For example:

• Choosing a shipment method
• Toggling modes for the view of your page

Basic Structure

In the following the basic structure of the yRadio shall be explained. For the general structure of a yComponent please visit the YBase-components basic-structure.

The yRadio as seen above contains a label and the radio.

Label

The label contains the text inside the button. It is on the right side of the component. By changing the inner padding of the button, the label gets moved too. You can find further explanation at the Label Property.

Radio

A radio button, often referred to as a radio bubble, is a graphical user interface element that allows the user to choose only one option from a set of predefined options. It appears as a small circle that, when selected, is filled or marked with a dot or check inside. Radio buttons are typically grouped together to form a radio group, ensuring that selecting one button will deselect any other previously selected button within the same group. This makes them ideal for presenting exclusive choices where only one selection is allowed, such as choosing a shipping option, selecting a gender, or picking a payment method.

Properties

Through its various properties the yRadio can be configured to suit your needs. The display below provides you with an overview of all the yRadio properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-radio__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-radio__component-type

The type of the component. For this component it is -radio.

Name: name

String Property

--y-radio__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-radio__version

The custom version of the Radio-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-radio__core-theme

The CoreTheme, which will be apllied to the Radio. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-radio__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Radio. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-radio__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-radio__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-radio__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-radio__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-radio__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-radio__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-radio__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-radio__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-radio__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-radio__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-radio__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-radio__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-radio__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-radio__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-radio__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-radio__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-radio__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-radio__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-radio__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-radio__bg-color

--y-radio__bg-color__normal

--y-radio__bg-color__hover

--y-radio__bg-color__active

--y-radio__bg-color__focus

--y-radio__bg-color__disabled

--y-radio__bg-color__error

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-radio__border-top-color

--y-radio__border-top-color__normal

--y-radio__border-top-color__hover

--y-radio__border-top-color__focus

--y-radio__border-top-color__active

--y-radio__border-top-color__disabled

--y-radio__border-top-color__error

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-radio__border-top-style

--y-radio__border-top-style__normal

--y-radio__border-top-style__hover

--y-radio__border-top-style__focus

--y-radio__border-top-style__active

--y-radio__border-top-style__disabled

--y-radio__border-top-style__error

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-radio__border-top-width

--y-radio__border-top-width__normal

--y-radio__border-top-width__hover

--y-radio__border-top-width__focus

--y-radio__border-top-width__active

--y-radio__border-top-width__disabled

--y-radio__border-top-width__error

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-radio__border-right-color

--y-radio__border-right-color__normal

--y-radio__border-right-color__hover

--y-radio__border-right-color__focus

--y-radio__border-right-color__active

--y-radio__border-right-color__disabled

--y-radio__border-right-color__error

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-radio__border-right-style

--y-radio__border-right-style__normal

--y-radio__border-right-style__hover

--y-radio__border-right-style__focus

--y-radio__border-right-style__active

--y-radio__border-right-style__disabled

--y-radio__border-right-style__error

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-radio__border-right-width

--y-radio__border-right-width__normal

--y-radio__border-right-width__hover

--y-radio__border-right-width__focus

--y-radio__border-right-width__active

--y-radio__border-right-width__disabled

--y-radio__border-right-width__error

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-radio__border-bottom-color

--y-radio__border-bottom-color__normal

--y-radio__border-bottom-color__hover

--y-radio__border-bottom-color__focus

--y-radio__border-bottom-color__active

--y-radio__border-bottom-color__disabled

--y-radio__border-bottom-color__error

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-radio__border-bottom-style

--y-radio__border-bottom-style__normal

--y-radio__border-bottom-style__hover

--y-radio__border-bottom-style__focus

--y-radio__border-bottom-style__active

--y-radio__border-bottom-style__disabled

--y-radio__border-bottom-style__error

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-radio__border-bottom-width

--y-radio__border-bottom-width__normal

--y-radio__border-bottom-width__hover

--y-radio__border-bottom-width__focus

--y-radio__border-bottom-width__active

--y-radio__border-bottom-width__disabled

--y-radio__border-bottom-width__error

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-radio__border-left-color

--y-radio__border-left-color__normal

--y-radio__border-left-color__hover

--y-radio__border-left-color__focus

--y-radio__border-left-color__active

--y-radio__border-left-color__disabled

--y-radio__border-left-color__error

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-radio__border-left-style

--y-radio__border-left-style__normal

--y-radio__border-left-style__hover

--y-radio__border-left-style__focus

--y-radio__border-left-style__active

--y-radio__border-left-style__disabled

--y-radio__border-left-style__error

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-radio__border-left-width

--y-radio__border-left-width__normal

--y-radio__border-left-width__hover

--y-radio__border-left-width__focus

--y-radio__border-left-width__active

--y-radio__border-left-width__disabled

--y-radio__border-left-width__error

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-radio__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-radio__box-shadow

--y-radio__box-shadow__normal

--y-radio__box-shadow__hover

--y-radio__box-shadow__focus

--y-radio__box-shadow__active

--y-radio__box-shadow__disabled

--y-radio__box-shadow__error

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-radio__opacity

--y-radio__opacity__normal

--y-radio__opacity__hover

--y-radio__opacity__focus

--y-radio__opacity__active

--y-radio__opacity__disabled

--y-radio__opacity__error

The opacity of all colored parts of the component. This value is set in percent.

LABELread more

Name: label__fontColor

Injectable

Color Property

--y-radio__label__font-color

--y-radio__label__font-color__normal

--y-radio__label__font-color__hover

--y-radio__label__font-color__focus

--y-radio__label__font-color__active

--y-radio__label__font-color__disabled

--y-radio__label__font-color__error

The color of the label text. This can be set as a color from a palette or a custom hex color.

Name: label__fontFamily

Injectable

String Property

--y-radio__label__font-family

--y-radio__label__font-family__normal

--y-radio__label__font-family__hover

--y-radio__label__font-family__focus

--y-radio__label__font-family__active

--y-radio__label__font-family__disabled

--y-radio__label__font-family__error

The font-family of the label text. This can be picked from a large list of provided fonts.

Name: label__fontWeight

Injectable

Number Property

--y-radio__label__font-weight

--y-radio__label__font-weight__normal

--y-radio__label__font-weight__hover

--y-radio__label__font-weight__focus

--y-radio__label__font-weight__active

--y-radio__label__font-weight__disabled

--y-radio__label__font-weight__error

The font-weight of the label text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: label__fontStyle

Injectable

String Property

--y-radio__label__font-style

--y-radio__label__font-style__normal

--y-radio__label__font-style__hover

--y-radio__label__font-style__focus

--y-radio__label__font-style__active

--y-radio__label__font-style__disabled

--y-radio__label__font-style__error

The font-style of the label text. This can be set to normal, italic or oblique.

Name: label__textTransform

Injectable

String Property

--y-radio__label__text-transform

--y-radio__label__text-transform__normal

--y-radio__label__text-transform__hover

--y-radio__label__text-transform__focus

--y-radio__label__text-transform__active

--y-radio__label__text-transform__disabled

--y-radio__label__text-transform__error

The text-transformation of the label text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: label__textDecoration

Injectable

String Property

--y-radio__label__text-decoration

--y-radio__label__text-decoration__normal

--y-radio__label__text-decoration__hover

--y-radio__label__text-decoration__focus

--y-radio__label__text-decoration__active

--y-radio__label__text-decoration__disabled

--y-radio__label__text-decoration__error

The text-decoration of the label text. This can be set to:

• strikethrough
• underline

Name: label__fontSize

Injectable

UnitNumber Property

--y-radio__label__font-size

The font-size of the label text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: label

String Property

--y-radio__label

The actual written text in the label. There is no limit to the number of characters.

Name: leftLabel

String Property

--y-radio__left-label

The actual written text in the left label. There is no limit to the number of characters.

RADIOread more

Name: radioOff__bgColor

Injectable

Color Property

--y-radio__radio-off__bg-color

--y-radio__radio-off__bg-color__normal

--y-radio__radio-off__bg-color__hover

--y-radio__radio-off__bg-color__active

--y-radio__radio-off__bg-color__focus

--y-radio__radio-off__bg-color__disabled

--y-radio__radio-off__bg-color__error

The color of the turned off radio background. This can be set as a color from a palette or a custom hex color.

Name: radioOff__borderColor

Injectable

Color Property

--y-radio__radio-off__border-color

--y-radio__radio-off__border-color__normal

--y-radio__radio-off__border-color__hover

--y-radio__radio-off__border-color__active

--y-radio__radio-off__border-color__focus

--y-radio__radio-off__border-color__disabled

--y-radio__radio-off__border-color__error

The color of the border of the turned off radio. This can be set as a color from a palette or a custom hex color.

Name: radioOn__bgColor

Injectable

Color Property

--y-radio__radio-on__bg-color

--y-radio__radio-on__bg-color__normal

--y-radio__radio-on__bg-color__hover

--y-radio__radio-on__bg-color__active

--y-radio__radio-on__bg-color__focus

--y-radio__radio-on__bg-color__disabled

--y-radio__radio-on__bg-color__error

The color of the turned on radio background. This can be set as a color from a palette or a custom hex color.

Name: radioOn__iconColor

Injectable

Color Property

--y-radio__radio-on__icon-color

--y-radio__radio-on__icon-color__normal

--y-radio__radio-on__icon-color__hover

--y-radio__radio-on__icon-color__active

--y-radio__radio-on__icon-color__focus

--y-radio__radio-on__icon-color__disabled

--y-radio__radio-on__icon-color__error

The color of the icon inside the turned on radio. This can be set as a color from a palette or a custom hex color.

Name: radioOn__borderColor

Injectable

Color Property

--y-radio__radio-on__border-color

--y-radio__radio-on__border-color__normal

--y-radio__radio-on__border-color__hover

--y-radio__radio-on__border-color__active

--y-radio__radio-on__border-color__focus

--y-radio__radio-on__border-color__disabled

--y-radio__radio-on__border-color__error

The color of the border of the turned on radio. This can be set as a color from a palette or a custom hex color.

Name: radio__circleAnimationColor

Injectable

Color Property

--y-radio__radio__circle-animation-color

--y-radio__radio__circle-animation-color__hover

--y-radio__radio__circle-animation-color__active

--y-radio__radio__circle-animation-color__focus

--y-radio__radio__circle-animation-color__error

The color of the circle-animation of the radio. This can be set as a color from a palette or a custom hex color.

Name: radio__circleAnimationColorOpacity

Injectable

Number Property

--y-radio__radio__circle-animation-color-opacity

--y-radio__radio__circle-animation-color-opacity__hover

--y-radio__radio__circle-animation-color-opacity__active

--y-radio__radio__circle-animation-color-opacity__focus

--y-radio__radio__circle-animation-color-opacity__error

The opacity of the colored circle animation of the radio. This value is set in percent.

Name: radio__borderWidth

Injectable

UnitNumber Property

--y-radio__radio__border-width

The value for the width of the border of the radio. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: radio__borderStyle

String Property

--y-radio__radio__border-style

The style of the radio of the selected row. This can be be set to:

• solid
• dotted
• dashed
• none

Name: radio__circleAnimationSize

Injectable

Number Property

--y-radio__radio__circle-animation-size

The size of the circle animation of the radio. This value is set in px.

Name: value

String Property

--y-radio__value

The preset value of the radio (e.g. 'true' or 'false').

Name: comparisonVal

String Property

--y-radio__comparison-val

The value that will be used as a means of comparision to check if the current radio button is active.

Radio

STATEread more

Name: disabled

Boolean Property

--y-radio__disabled

This property can disable or enable the disabled-state of the Radio-component.

Name: error

Boolean Property

--y-radio__error

This property can disable or enable the error-state of the Radio-component.

TOOLTIPread more

Name: tooltip

String Property

--y-radio__tooltip

The text of the tooltip, which is displayed when hovering over the Radio-component. If you do not insert anything, no tooltip appears.

ERRORread more

Name: errorMessage

String Property

--y-radio__error-message

The message to be displayed, if an error occurs.

MISCread more

Name: deselect

Boolean Property

--y-radio__deselect

This property specifies if a deselection, by clicking again, is possible.

Links

VALUEread more

Name: sourceLinkValue

String Property

--y-radio__source-link-value

This property defines a link to another component by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent a comparison value.

Events

LIFECYCLEread more

Name: EvtInit

String Property

--y-radio__-evt-init

This specifies the function to be called, when the Radio is initialized.

INPUTread more

Name: EvtClicked

String Property

--y-radio__-evt-clicked

The event that is triggered when clicking inside the input field.

Usage

In this section you'll find a collection of application scenarios and examples that illustrate how to leverage the yRadio in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations

Elevated

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosmaxHeight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOff__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOn__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOn__borderColor#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#FFFFFF

Flat

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosmaxHeight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOff__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOn__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOn__borderColor#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#FFFFFF

Outlined

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosmaxHeight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderStyleTop__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleRight__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleBottom__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleLeft__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderWidthTop__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthRight__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthBottom__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthLeft__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderColorTop__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorRight__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorBottom__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorLeft__normal#44ddbb

stylearrow_forward_iosradioarrow_forward_iosradioOff__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#44ddbb

stylearrow_forward_iosradioarrow_forward_iosradioOn__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOn__borderColor#44ddbb

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#44ddbb

Rounded

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosmaxHeight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius20px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOff__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOn__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOn__borderColor#FFFFFF

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#FFFFFF

Plain

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosmaxHeight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#44ddbb

stylearrow_forward_iosradioarrow_forward_iosradioOff__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#44ddbb

stylearrow_forward_iosradioarrow_forward_iosradioOn__bgColortransparent

stylearrow_forward_iosradioarrow_forward_iosradioOn__borderColor#44ddbb

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#44ddbb

Radio Stylings

Minimalist

genericarrow_forward_iossizearrow_forward_iosmaxWidth120px

stylearrow_forward_iosradioarrow_forward_iosradio__circleAnimationColorOpacity0

Bold

genericarrow_forward_iossizearrow_forward_iosmaxWidth120px

stylearrow_forward_ioslabelarrow_forward_iosfontSize16px

stylearrow_forward_ioslabelarrow_forward_iosfontStylebold

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#dc3545

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#dc3545

stylearrow_forward_iosradioarrow_forward_iosradioOn__borderColor#dc3545

stylearrow_forward_iosradioarrow_forward_iosradio__circleAnimationColor#e2e6ea

Luminous

genericarrow_forward_iossizearrow_forward_iosmaxWidth120px

stylearrow_forward_ioslabelarrow_forward_iosfontColor#FF9F1C

stylearrow_forward_iosradioarrow_forward_iosradioOff__borderColor#FF9F1C

stylearrow_forward_iosradioarrow_forward_iosradioOn__bgColor#FF9F1C

stylearrow_forward_iosradioarrow_forward_iosradioOn__iconColor#FF9F1C

stylearrow_forward_iosradioarrow_forward_iosradio__circleAnimationColor#FF9F1C

stylearrow_forward_iosradioarrow_forward_iosradio__circleAnimationColorOpacity0.5

stylearrow_forward_iosradioarrow_forward_iosradio__circleAnimationColorSize2

Label Variations

Label Left

genericarrow_forward_iossizearrow_forward_iosminWidth'auto'

genericarrow_forward_iossizearrow_forward_iosmaxWidthnone

stylearrow_forward_ioslabelarrow_forward_iosleftLabel'left'

Label Right

genericarrow_forward_iossizearrow_forward_iosminWidth'auto'

genericarrow_forward_iossizearrow_forward_iosmaxWidthnone

stylearrow_forward_ioslabelarrow_forward_ioslabel'right'

stylearrow_forward_ioslabelarrow_forward_iostextTransform'uppercase'

Label Both

genericarrow_forward_iossizearrow_forward_iosminWidth'auto'

genericarrow_forward_iossizearrow_forward_iosmaxWidthnone

stylearrow_forward_ioslabelarrow_forward_iosleftLabel'left'

stylearrow_forward_ioslabelarrow_forward_ioslabel'right'

Dynamic Value Assignment

The yRadio component is designed to facilitate dynamic user interactions within your application. It achieves this through two primary properties found within the "style" > "radio" category, value and comparisonVal.

Value Property

The value property is intended to be set externally, either by user action or programmatically via JavaScript. This property represents the current state or selection of the yRadio component.

Via Javascript:

Button EvtClicked

// function onButton_1_EvtClicked (apiObject, component, eventData)
const shipingMethod = "LKW";
const radioComponent = apiObject.ui.getObject(1, "y-radio");
radioComponent.set("style", "radio", "value", shipingMethod);
//}

In this snippet, yourDesiredValue is the actual value that you want the yRadio to hold, which will reflect the user's selection. Alternatively, yRadio can obtain its value through a SourceLink. This method establishes a connection between yRadio and another component. The value received through the SourceLink is then compared against the comparisonVal to determine the radio button's state. The value can be coupled to a Clipboard value via the SourceLink Picker.

Via SourceLink:

1. Create a yRadio component in your application.
2. Create a yInput component in your application.
3. Select the created yRadio and open the Detail Panel.
4. Within these settings, proceed to the "Links" section and open "Value".
5. Create a new sourceLink -> select the yInput you just created and choose input-string as an event.

In this example you should find a way to demand either by mask/validation or javascript to make sure the input-string is represented as a radio-value.

ComparisonVal Property

The comparisonVal serves as a unique identifier for a yRadio component within a group of similar radio buttons. To create a set of mutually exclusive selections — where choosing one option deselects the others — multiple yRadio components can share the same comparisonVal.

For instance, if you have a group of radio buttons for selecting a shipping method, each radio button's comparisonVal might be set to "shippingMethod". The one whose value matches the comparisonVal will be marked as selected:

yButton:EvtClicked

// function onButton_1_EvtClicked (apiObject, component, eventData)
const shipingMethod = "SHIP";
const radioComponent = apiObject.ui.getObject(1, "y-radio");
radioComponent.set("style", "radio", "comparisonVal", shipingMethod);
//}

The Comparisonval should only seldomly be changed via javascript.

Coupling and Selection State

When you have multiple radio buttons with the same comparisonVal, they are effectively coupled. The selection state (true or false) of these yRadio components is determined by comparing their value with their comparisonVal. When the value matches the comparisonVal, that particular radio button is selected (its state is true). If they don't match, the radio button remains unselected (its state is false).

This mechanism ensures that within a set of yRadio components with the same purpose, only the one with a matching value will be selected, enforcing the rule that only one option can be chosen at a time in a radio group.

By leveraging the value and comparisonVal properties, yRadio components can be effectively used to create a responsive and intuitive selection interface within your application.

Real Life Use Cases

Payment for a shop

This example provides the code to get the selected Payment-Method from radio buttons without the usage of a sourceLink for an external radio value. When a button is clicked the selected payment method will be fetched.

Button EvtClicked

// function onButton_1_EvtClicked (apiObject, component, eventData)
// Assume we have 3 radio buttons for payment methods: "Credit Card", "PayPal", "Bank Transfer"
// Each radio button has a unique ID

let selectedMethod;
const paymentMethods = [
  {
    name: "Credit Card",
    radioId: 4,
  },
  {
    name: "PayPal",
    radioId: 5,
  },
  {
    name: "Bank Transfer",
    radioId: 6,
  },
];

paymentMethods.forEach((method) => {
  const radioButton = apiObject.ui.getObject(method.radioId, "y-radio");
  const selectedValue = radioButton.get("style", "radio", "value");
  const comparisonValue = radioButton.get("style", "radio", "comparisonValue");
  const isSelected = selectedValue == comparisonValue;

  if (isSelected) {
    selectedMethod = method.name;
    console.log(`Selected payment method: ${method.name}`);
  }
});

if (!selectedMethod) {
  alert("Please select a payment method.");
  return false;
}

return true;
//}

Displaymodes

In this example three radios with the keys depicted in displayModes variables are needed. The following function has to be included in each of those radios as the 'EvtClicked'-Function.

Radio EvtClicked

// function onRadio_1_EvtClicked (apiObject, component, eventData)
// Function to toggle UI elements based on the selected display mode using YRadio
const displayModes = {
  BasicView: ["basicElement1", "basicElement2"], // List of elements to be shown in Basic View
  AdvancedView: ["advancedElement1", "advancedElement2"], // List of elements for Advanced View
  ExpertView: ["expertElement1", "expertElement2"], // List of elements for Expert View
};

// Assume the radio buttons have IDs that match the display modes
const selectedMode = component.get("style", "radio", "value");

// Hide all elements first
Object.values(displayModes)
  .flat()
  .forEach((elementId) => {
    const element = apiObject.ui.getObject(elementId);
    element.set("generic", "display", "visible", "none");
  });

// Show elements for the selected mode
if (displayModes[selectedMode]) {
  displayModes[selectedMode].forEach((elementId) => {
    const element = apiObject.ui.getObject(elementId);
    element.set("generic", "display", "visible", "block");
  });
  console.log(`Display mode set to: ${selectedMode}`);
} else {
  console.error("Selected mode is not recognized:", selectedMode);
}
//}

Special Picker

SourceLink Picker

There is a special picker for the yRadio in the Toolbar as a Toolbar Extension which will be used to link the component to a logic of 2 or more other components. This is a kind of SourceLink Picker, similar to other SourceLink Pickers to be found in other components.